@pink: deeppink;
@width: 300px;
@border-w: 10px;
@r: 255;
@g: 255;
@b: 255;
@bgUrl: '@/assets';
@color: yellow;
@bgred: green;
@myBlack: bgBlack;
@bgBlack: black;

.h1-width-100{
  width: @width; /*直接使用变量做属性的值 */
  border: @border-w solid rgb(@r - 255, @g,@b) ; /*变量使用表达式的简单的计算*/
  background-color: @@myBlack; /* 一个变量的值，是另一个变量的名字*/
  color: @pink;
}
// Mixins: 混入： 在一个选择器里面，使用其他选择器的代码：像调用函数：
//这个选择器名称后面，加了(),表示不单独渲染成一个选择器。只用来做混入使用。
.bg-gray(){
  background-color: rgb(4, 139, 128);
}
// .border-bottom{  // 没有带（），这个选择器会独立生成。
//   border: 3px solid red;
// }

// 有参数的选择器：
// .border-bottom (@w1; @style; @c1){  // 没有带（），这个选择器会独立生成。
//   border: @w1 @style @c1;
// }

// 带默认值的参数
.border-bottom (@w1:3px ; @style: solid; @c1:black){  // 没有带（），这个选择器会独立生成。
  border: @w1 @style @c1;
}
.menu-ul{
  // .bg-gray();  // 混入一个选择器
  // .border-bottom(5px; dashed; red);  // 混入时，传参数
  // .border-bottom(5px; dashed;); /*必须按顺序传入参数，不能只传除第一个以外的参数*/
  list-style: none;
  margin: 0; 
  padding: 0;

  // less 使用嵌套：
  // & 表示当前&所在上下文环境的选择器。
  // > 表示是生成子元素选择器
  // : 当前选择器的伪类或伪元素。
  // " " ,空格键，表示是生成后代元素选择器
  & > li {
    float: left;
    width: 20%;
    line-height: 40px;
    background-color: @bgred;
    text-align: center;
    & > a{
      text-decoration: none;
      display: inline-block;
      width: 100%;
      height: 100%;
      &:link{ 
        color: white;
      }
      &:hover{
        color: yellow;
        background-color: @pink;
      }
    }
  }

  & a{
    // 如果 & a {}没有直接的CSS属性，就不会生成 .menu a{}
    border-bottom: 3px solid @pink;
    &:visited{
      color: blue;
    }
    &:active{
      color: black;
    }
  }

}
/*
.h1-width-100 {
  width: 300px;
 
  border: 10px solid #00ffff;
 
  background-color: black;
 
  color: deeppink;
}
.menu-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-ul > li {
  float: left;
  width: 20%;
  line-height: 40px;
  background-color: green;
  text-align: center;
}
.menu-ul > li > a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.menu-ul > li > a:link {
  color: white;
}
.menu-ul > li > a:hover {
  color: yellow;
  background-color: deeppink;
}
.menu-ul a {
  border-bottom: 3px solid deeppink;
}
.menu-ul a:visited {
  color: blue;
}
.menu-ul a:active {
  color: black;
}
*/